<template>
	<view class="training">
		<view class="training-top">
			<view class="training-top-title">
				普通话模拟测试
			</view>
			<view class="training-top-subtitle">
				真题实战模拟考试/体验完整流程
			</view>
			<view class="training-top-btn">
				<u-button class="ljty" type="primary" text="立即体验"></u-button>
			</view>
		</view>
		<view class="training-content">
			<view class="card xljl">
				<view class="card-top">
					<view class="card-title">
						我的测试记录
					</view>
					<view class="card-more"  @click="toRecord">
						<img src="@/static/img/more.png" alt="" />
					</view>
				</view>
				<view class="card-content">
					<view class="data-list">
						<view class="data-item">
							<view class="data-item-value">
								不及格
							</view>
							<view class="data-item-title">
								测试等级
							</view>
						</view>
						<view class="data-item">
							<view class="data-item-value">
								0.01
							</view>
							<view class="data-item-title">
								预估分数
							</view>
						</view>
						<view class="data-item">
							<view class="data-item-value">
								4
							</view>
							<view class="data-item-title">
								考试次数
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card ztsj">
				<view class="card-top">
					<view class="card-title">
						真题试卷
					</view>
					<view class="card-more">
						<img src="@/static/img/more.png" alt="" />
					</view>
				</view>
				<view class="card-content">
					<view class="ztsj-list">
						<view class="ztsj-item">
							<img src="@/static/img/is_right.png" alt="" />
							<view class=""> 随学随测 </view>
						</view>
						<view class="ztsj-item">
							<img src="@/static/img/is_right.png" alt="" />
							<view class=""> 智能评分 </view>
						</view>
						<view class="ztsj-item">
							<img src="@/static/img/is_right.png" alt="" />
							<view class=""> 提升普通话学习效率 </view>
						</view>
					</view>
				</view>
			</view>
			
			
			<view class="card xljl">
				<view class="card-top">
					<view class="card-title">
						我的测试记录
					</view>
				</view>
				<view class="card-content">
					<view class="data-list">
						<view class="data-item">
							<view class="data-item-value">
								<img src="@/static/img/dyzj.png" alt="" />
							</view>
							<view class="data-item-title">
								单音节字
							</view>
						</view>
						<view class="data-item">
							<view class="data-item-value">
								<img src="@/static/img/dyzj2.png" alt="" />
							</view>
							<view class="data-item-title">
								多音节词
							</view>
						</view>
						<view class="data-item">
							<view class="data-item-value">
								<img src="@/static/img/dwld.png" alt="" />
							</view>
							<view class="data-item-title">
								短文朗读
							</view>
						</view>
						<view class="data-item">
							<view class="data-item-value">
								<img src="@/static/img/mtsh.png" alt="" />
							</view>
							<view class="data-item-title">
								命题说话
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toRecord(){
				uni.navigateTo({
					url:'/pages/training/trainingRecord'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.training {
		background: #F3F5F8;
	}
	view {
		font-family: zktqkt, zktqkt;
		box-sizing: border-box;
	}
	.training-top {
		height: 528rpx;
		width: 100%;
		background-image: url('../../static/img/training-top.png');
		background-size: 100%;
		padding-left: 36rpx;
		color: #FFFFFF;
		padding-top: 194rpx;
		.training-top-title {
			font-size: 48rpx;
			line-height: 1;
		}
		.training-top-subtitle {
			font-size: 28rpx;
			line-height: 1;
			margin-top: 16rpx;
		}
		.training-top-btn {
			margin-top: 60rpx;
			padding-left: 20rpx;
			.ljty {
				width: 168rpx;
				height: 60rpx;
				background: #F3A71B;
				border-radius: 14rpx 14rpx 14rpx 14rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				margin: 0;
				border: none;
			}
		}
	}
	.training-content {
		padding: 0 32rpx;
		margin-top: -54rpx;
		padding-bottom: 24px;
	}
	.card {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx;
		padding-left: 24rpx;
		.card-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.card-title {
				font-size: 36rpx;
				color: #00113D;
				position: relative;
				padding-left: 20rpx;
				line-height: 1;
			}
			.card-title::after {
				content: '';
				height: 100%;
				width: 8rpx;
				height: 30rpx;
				position: absolute;
				left: 0px;
				top: 50%;
				transform: translateY(-50%);
				background-color: #3D7CFD ;
			}
		}
		.card-content {
			padding-right: 22rpx;
			.data-list {
				display: flex;
				justify-content: space-between;
				text-align: center;
				.data-item {
					.data-item-value {
						font-size: 36rpx;
						color: #00113D;
						height: 104rpx;
						line-height: 104rpx;
						img {
							width: 104rpx;
						}
					}
					.data-item-title {
						font-size: 32rpx;
						color: #666666;
					}
				}
				
				
			}
		}
	}
	.ztsj {
		margin-top: 24px;
		.card-content {
			margin-top: 46rpx;
		}
		.ztsj-list {
			.ztsj-item {
				display: flex;
				align-items: center;
				gap: 14rpx;
				margin-top: 16rpx;
				img {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	.xljl {
		margin-top: 24px;
		.card-content {
			padding: 46rpx 0;
		}
	}
</style>
